<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="5">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="name">模块类型</nz-form-label>
        <nz-form-control nzErrorTip="请选择模块类型">
          <!--          <input type="text" nz-input formControlName="memberId" placeholder="请选择消费会员"/>-->
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择模块类型" formControlName="type">
            <nz-option nzLabel="首页功能栏" nzValue="0"></nz-option>
            <nz-option nzLabel="基础功能" nzValue="1"></nz-option>
            <nz-option nzLabel="礼品管理" nzValue="2"></nz-option>
            <nz-option nzLabel="扭蛋管理" nzValue="3"></nz-option>
            <nz-option nzLabel="我的" nzValue="4"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="5">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="name">状态</nz-form-label>
        <nz-form-control nzErrorTip="请选择状态">
          <!--          <input type="text" nz-input formControlName="memberId" placeholder="请选择消费会员"/>-->
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择状态" formControlName="status">
            <nz-option nzLabel="下架" [nzValue]="false"></nz-option>
            <nz-option nzLabel="上架" [nzValue]="true"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="5">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="name">模块名称</nz-form-label>
        <nz-form-control nzErrorTip="请输入模块名称">
          <input type="text" id="keyword" nz-input formControlName="keyword" placeholder="请输入模块名称"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="2">
      <div nz-col nzFlex="auto" class="search-area">
        <button nz-button nzType="primary" class="button_search"><i nz-icon nzType="search" nzTheme="outline"></i>查询
        </button>
      </div>
    </div>

  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="margin-bottom">
    <button nz-button nzType="primary" (click)="editModal(null)">
      <i nz-icon nzType="plus" nzTheme="outline"></i>添加
    </button>
  </div>
  <nz-table  #nzTable [nzData]="listOfMapData" nzTableLayout="fixed"
             [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
             (nzPageIndexChange)="nzPageIndexChange($event)"
             [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
             [nzScroll]="{ x: 'auto' }">
    <thead>
    <tr>
      <th width="200px">模块名称</th>
      <th>模块类型</th>
      <th>排序</th>
      <th width="150px">子账号是否可看</th>
      <th>图片路径</th>
      <th>跳转路径</th>
      <th>图标颜色</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
        <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
          <td nzEllipsis  [nzIndentSize]="item.level! * 20"
              [nzShowExpand]="!!item.children"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="baseService.zorro.collapse(mapOfExpandedData[data.key], item, $event)">
            {{ item.name }}
            <span *ngIf="item.children != null">
              <nz-tag [nzColor]="item.children.length > 0 ? '#108ee9' : ''">{{item.children.length}}</nz-tag>
            </span>
          </td>
          <td nzEllipsis>
            <span *ngIf="item.type == 0">首页功能栏</span>
            <span *ngIf="item.type == 1">基础功能</span>
            <span *ngIf="item.type == 2">礼品管理</span>
            <span *ngIf="item.type == 3">扭蛋管理</span>
            <span *ngIf="item.type == 4">我的</span>
          </td>
          <td nzEllipsis>{{ item.sort }}</td>
          <td nzEllipsis>
            <nz-tag *ngIf="item.allocationType == 1" [nzColor]="'#108ee9'">可查看</nz-tag>
            <nz-tag *ngIf="item.allocationType == 2" [nzColor]="'#f50'">不可查看</nz-tag>
          </td>
          <td nzEllipsis><a nz-tooltip [nzTooltipTitle]="item.imgUrl">图片路径</a></td>
          <td nzEllipsis><a nz-tooltip [nzTooltipTitle]="item.navUrl">跳转路径</a></td>
          <td nzEllipsis>
            <nz-tag [nzColor]="item.iconColor" *ngIf="item.iconColor">{{ item.iconColor }}</nz-tag></td>
          <td nzEllipsis><nz-switch [ngModel]="item.status" nzCheckedChildren="上架" nzUnCheckedChildren="下架" (ngModelChange) = "updateStatus(item,$event)"></nz-switch></td>
          <td nzEllipsis>
            <a (click)="editModal(item)">编辑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="del(item)">删除</a>
            <nz-divider nzType="vertical"  *ngIf="item.parentId == null"></nz-divider>
            <a *ngIf="item.parentId == null" (click) = "childEditModel(item)">添加子模块</a>
          </td>
        </tr>
      </ng-container>
    </ng-container>
    </tbody>
  </nz-table>
</div>
<app-module-edit [isVisible]="isVisible" [module]="module" (emit) = "handleCancel()" (editNotice) = "findList()"></app-module-edit>
